<!DOCTYPE html>
<html>
    <head>

        <link rel="canonical" href="http://www.jointjs.com/" />
        <meta name="description" content="Create interactive diagrams in JavaScript easily. JointJS plugins for ERD, Org chart, FSA, UML, PN, DEVS, LDM diagrams are ready to use." />
        <meta name="keywords" content="JointJS, JavaScript, diagrams, diagramming library, UML, charts" />

        <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet" type="text/css" />
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

        <link rel="stylesheet" href="css/tutorial.css" />
        <link rel="stylesheet" href="../node_modules/prismjs/themes/prism.css">


        <!-- Dependencies: -->
        <script src="../node_modules/jquery/dist/jquery.js"></script>
        <script src="../node_modules/lodash/lodash.js"></script>
        <script src="../node_modules/backbone/backbone.js"></script>


        <link rel="stylesheet" type="text/css" href="../build/joint.min.css" />
        <script type="text/javascript" src="../build/joint.min.js"></script>

        <title>JointJS - JavaScript diagramming library - Getting started.</title>

    </head>
    <body class="language-javascript tutorial-page">

        <script>
            SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function(toElement) {
                return toElement.getScreenCTM().inverse().multiply(this.getScreenCTM());
            };
        </script>

        <div class="tutorial">

            <h2>Multiple papers for the same graph</h2>

            <p>We mentioned in the <a href="introduction.html">tutorial introduction</a> that JointJS has an MVC
                structure.
                Importantly, this also applies to the <a href="graph-and-paper.html">two main JointJS components</a> -
                the <code>joint.dia.Graph</code> model and its view - <code>joint.dia.Paper</code>.
                Therefore, nothing prevents us from associating more than one paper to a single graph!</p>

            <p>When several papers are connected to the same graph, they all present the same data and communicate user
                interaction to the same underlying model.
                Each of those papers can apply their own transformations to the presented information, which allows us
                to create diagram minimaps and previews.</p>

            <p>Let us adapt our basic Hello, World! <a href="hello-world">application</a> and overlay it with a smaller,
                non-interactive minimap.
                Notice that as you interact with the bigger paper, all modifications are reflected in the preview.</p>

            <div style="position: relative; padding-bottom: 100px;">
                <div class="paper" id="paper-multiple-papers" style="position: absolute;"></div>
                <div class="paper" id="paper-multiple-papers-small" style="position: absolute; top: 75px; left: 450px;"></div>
            </div>

            <p>We use a simple HTML to make the papers overlap...</p>

            <pre><code>&lt;div style="position: relative; padding-bottom: 100px;"&gt;
    &lt;div class="paper" id="paper-multiple-papers" style="position: absolute;"&gt;&lt;/div&gt;
    &lt;div class="paper" id="paper-multiple-papers-small" style="position: absolute; top: 75px; left: 450px;"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>

            <p>...and the following JavaScript to populate the two papers:</p>

            <pre data-src="js/multiple-papers.js"></pre>

            <p>JointJS source code: <a href="js/multiple-papers.js" target="_blank">multiple-papers.js</a></p>

        </div><!--end tutorial-->

        <script src="../node_modules/prismjs/prism.js"></script>

        <script src="js/multiple-papers.js"></script>
    </body>
</html>
